<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div>{{ greeter("lgz") }}123</div>
    <div>{{ person }}</div>
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
let myFavoriteNumber: number | string;
myFavoriteNumber = 7;
myFavoriteNumber = "lgz";
interface LabelValue {
  label?: string;
  sci?: number;
}
function printLabel(labelObj: LabelValue) {
  console.log(labelObj.label);
  if (labelObj.sci) {
    console.log(labelObj.sci);
  }
}

const labelObj = { size: 10, label: "xiaoshazi" };
printLabel(labelObj);

interface NumberArr {
  [index: number]: number;
}
const arr: number[] = [1, 2, 3];
const arr2: NumberArr = [1, 2, 3];
interface Person {
  name: string;
  age: number;
}
enum Color {
  Red = 1,
  Green,
  Blue
}
const c: Color = Color.Blue;
const d: string = Color[1];
export default {
  name: "Home",
  components: {},
  data() {
    return {
      str: myFavoriteNumber,
      person: {}
    };
  },
  methods: {
    greeter(person: string | number): string {
      return `hello${person}`;
    }
  }
};
</script>
